import {
  Button,
  Cascader,
  Divider,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Select,
  SelectOption,
  Space,
  Spin,
  Textarea
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import aiTestSkinApi from '@/apis/aiTestSkinApi'
import { backgroundInfo } from '@/apis/aiTestSkinTypes'
import UploadFile from '@/components/UploadFile'
import { STATUS } from '@/components/UploadFile/types'

export default defineComponent({
  name: 'DetectHomepage',
  setup() {
    const loading = ref(false)
    const confirmLoading = ref(false)

    const data = ref({} as backgroundInfo)
    const uploadedImageUrl = ref('') // 存储上传成功后的图片URL
    const inputRef = ref<HTMLInputElement | null>(null)
    function handleUploadSuccess() {
      inputRef.value?.click() // 触发文件选择框弹出
    }

    function handleFileChange(event: Event) {
      const target = event.target as HTMLInputElement
      if (target.files && target.files.length > 0) {
        const url = URL.createObjectURL(target.files[0])

        uploadedImageUrl.value = url // 将上传成功后的URL赋值给uploadedImageUrl
      }
    }

    onMounted(() => {
      getDetail()
    })

    async function getDetail() {
      try {
        loading.value = true
        const config = await aiTestSkinApi.getBackgroundConfig()
        if (config) {
          data.value = config
          uploadedImageUrl.value = config.indexBackgroud
        }
      } finally {
        loading.value = false
      }
    }
    async function handleSave() {
      try {
        const updatedData = {
          indexBackgroud: uploadedImageUrl.value
        }
        await aiTestSkinApi.editBackgroundConfig({
          indexBackgroud: updatedData.indexBackgroud
        })
        data.value = updatedData
        message.success('保存成功')
      } finally {
      }
    }

    return {
      confirmLoading,
      handleSave,
      handleUploadSuccess,
      uploadedImageUrl,
      inputRef,
      handleFileChange
    }
  },
  render() {
    return (
      <div>
        <div
          style={{
            width: '300px',
            height: '612px',
            background: '#565656',
            marginLeft: '200px',
            position: 'relative'
          }}
        >
          {this.uploadedImageUrl && (
            <img
              src={this.uploadedImageUrl}
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover'
              }}
            />
          )}
          <UploadFile
            v-model={[this.uploadedImageUrl, 'urls']}
            showUploadList={false}
            hideUploadUpLimit={false}
            imageSizeLimtWeak={false}
            imageSizeLimtWH={[1125, 2436]}
          >
            <Button
              style={{
                width: '200px',
                height: '120px',
                position: 'absolute',
                top: '30%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                textAlign: 'center'
              }}
            >
              点击替换首页背景
            </Button>
          </UploadFile>
          <input
            type="file"
            ref="inputRef"
            style={{ display: 'none' }} // 隐藏input元素
            onChange={this.handleFileChange}
          />
          <Button
            style={{
              width: '203px',
              height: '44px',
              background: 'linear-gradient(90deg, #F57F9F 0%, #DE4871 100%)',
              position: 'absolute',
              left: '16%',
              bottom: '50px'
            }}
          >
            开始测肤
          </Button>
        </div>
        <div style={{ marginTop: '20px' }}>
          <span>
            首页图片上传提示：建议上传尺寸为：1125px*2436px的jpg、png、GIF图片
            测肤按钮、我的报告位置都固定，不用做在首页背景上面
            多次上传图片会替换上一张，点击：“保存”即会生效在前端展示。
          </span>
        </div>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          style={{ marginTop: '20px' }}
        >
          <Divider></Divider>
          <FormItem label=" " colon={false}>
            <Button
              loading={this.confirmLoading}
              type="primary"
              onClick={this.handleSave}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
})
